<template>
  <div class="app">
    <mt-header
      title="确认订单"
      style="
        background-color: rgb(248, 62, 62);
        font-size: 18px;
        font-family: Georgia;
      "
    >
      <router-link slot="left" to="/cart">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="Box">
      <!-- <router-link to="address"> -->
      <div class="addressesBox" @click="showAddress">
        <div class="iconImg">
          <img src="../assets/地址.svg" alt="" />
        </div>
        <div class="text">
          <div class="user">
            <span class="name">{{ades.name}}</span>
            <span class="phone">{{ades.tel}}</span>
          </div>
          <div class="addresses">
            <span
              >{{ades.address}}</span
            >
          </div>
          <div class="reminder">
            <span>收货不便时,可选择暂存服务</span>
          </div>
        </div>
        <div class="select">
          <img src="../assets/前进.svg" alt="" />
        </div>
      </div>

      <!-- </router-link> -->
      <div class="product">
        <div class="top">
          <img src="../assets/天猫.svg" alt="" />
          <span>奥林匹克官方旗舰店</span>
        </div>
        <!-- 商品 -->
        <div class="productDesc" v-for="(item,i) in car" :key="i">
          <div class="leftImg">
            <img :src="`${item.photo}`" alt="" />
          </div>
          <div class="cenText">
            <div class="d1">
              {{item.slogan}}
            </div>
            <div class="d2">
              <span>{{item.title}}</span>
            </div>
            <div class="d3">
              <span>可享先用后付</span>
            </div>
          </div>
          <div class="rightR">
            <div class="rightRtop">
              <span>¥</span>
              <span class="price">{{item.price}}</span>
            </div>
            <div class="rightRbottom">
              <span>x</span>
              <span class="count">1</span>
            </div>
          </div>
        </div>
        <!-- ...... -->
        <div>
          <van-cell is-link>
            <span style="color: #000">公益宝贝</span>
            <span style="margin-left: 10px; color: #999; font-size: 12px"
              >成交后卖家将捐赠0.10元给公益宝贝计划</span
            >
          </van-cell>
          <van-cell is-link style="position: relative">
            <span style="color: #000">配送方式</span>
            <span style="margin-left: 10px; color: #999; font-size: 12px"
              >普通配送</span
            >
            <span style="position: absolute; right: 5px">快递 免邮</span>
          </van-cell>
          <van-cell is-link style="position: relative">
            <img
              width="6%"
              style="position: absolute; top: 3px"
              src="../assets/问号.svg"
              alt=""
            />
            <span style="color: #000; margin-left: 15px">运费险</span>
            <span style="margin-left: 10px; color: #999; font-size: 12px"
              >卖家赠送，退换货可赔</span
            >
          </van-cell>
          <van-cell is-link style="position: relative">
            <span style="color: #000">店铺优惠</span>
            <span style="margin-left: 10px; color: #999; font-size: 12px"
              >省10元:新品优惠</span
            >
            <span
              style="position: absolute; right: 5px; color: rgb(247, 154, 48)"
              ><b>-¥10.00</b></span
            >
          </van-cell>
          <van-cell is-link style="position: relative">
            <span style="color: #000">开具发票</span>
            <span style="position: absolute; right: 5px">本次不开具发票</span>
          </van-cell>
          <div class="last">
            <div>
              <span class="s1">共{{totalMount}}件</span>
              <span class="s2">小计:</span>
              <span class="s3">¥</span>
              <span class="s4">{{(totalPrice/100)-10}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pay"></div>
    </div>
    <div class="checkqqq">
      <van-checkbox
        v-model="check"
        checked-color="rgb(247, 126, 14)"
        icon-size="16px"
        >匿名购买</van-checkbox
      >
    </div>
    <!-- 提交订单 -->
    <div id="app">
      <van-submit-bar
        :loading="loading"
        :price="totalPrice-10*100"
        :button-text="`提交订单(${totalMount})`"
        @submit="onSubmit"
        bottom="50px"
      >
      </van-submit-bar>
    </div>
    <van-popup
      v-model="show"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <div>
        <!-- header头 -->
        <mt-header
          title=""
          style="
            background-color: rgb(248, 62, 62);
            font-size: 18px;
            font-family: Georgia;
          "
        >
          <mt-button icon="back" slot="left" @click="Cancel"></mt-button>
        </mt-header>
        <!--  -->
        <van-address-list
          v-model="chosenAddressId"
          :list="list"
          :disabled-list="disabledList"
          disabled-text="以下地址超出配送范围"
          default-tag-text="默认"
          @select="select"
          @add="onAdd"
          @edit="onEdit"
        />
      </div>
    </van-popup>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      loading: false,
      check: false,
      show: false,
      chosenAddressId: "1",
      list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true,
        },
        {
          id: "2",
          name: "李四",
          tel: "1310000001",
          address: "浙江省杭州市拱墅区莫干山路 50 号",
        },
      ],
      disabledList: [
        {
          id: "3",
          name: "王五",
          tel: "1320000000",
          address: "浙江省杭州市滨江区江南大道 15 号",
        },
      ],
      ades:{
        name: "张三",
        tel: "13000000000",
        address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
      },
    };
  },
  methods: {
    onSubmit() {
      this.loading = true;
      setTimeout((res) => {
        this.loading = false;
      }, 1000);
    },
    showAddress() {
      this.show = true;
    },
    Cancel() {
      this.show = false;
    },
    select(item){
      this.ades=item
    },
    onAdd() {
      this.$toast("新增地址");
      this.$router.push("/addressedit");
    },
    onEdit(item, index) {
      this.$toast("编辑地址:" + index);
      this.$router.push("/addressedit");
    },
  },
  mounted() {
  },
  computed: {
    ...mapState(["totalPrice", "totalMount","car"]),
  },
};
</script>

<style scoped>
.app {
  height: 100%;
  background-color: rgb(241, 239, 239);
  font-family: "微软雅黑";
  overflow: auto;
  overflow-x: hidden;
}
.addressesBox {
  width: 95%;
  margin: auto;
  margin-top: 10px;
  border-radius: 10px;
  background-color: white;
  text-align: left;
  display: flex;
  position: relative;
  color: black;
}
.iconImg {
  width: 10%;
  position: relative;
}
.iconImg img {
  width: 80%;
  position: absolute;
  top: 35%;
  left: 20%;
}
.text {
  width: 78%;
  font-size: 14px;
  /* background-color: turquoise; */
  margin-left: 10px;
}
.user {
  margin: 10px 0px 5px 0px;
}
.name {
  font-size: 16px;
  font-weight: 600;
  margin-right: 10px;
}
.phone {
  color: #999;
}
.addresses {
  /* background-color: tomato; */
  height: 40px;
}
.reminder {
  color: rgb(247, 154, 48);
  margin: 5px 0px 5px 0px;
}
.select {
  width: 12%;
  position: relative;
}
.select img {
  width: 40%;
  position: absolute;
  right: 10px;
  top: 40%;
}

.product {
  width: 95%;
  margin: auto;
  margin-top: 10px;
  border-radius: 10px;
  background-color: white;
  display: flex;
  flex-direction: column;
}
.top {
  width: 100%;
  text-align: left;
  margin-left: 10px;
  margin-top: 15px;
  position: relative;
}
.top img {
  width: 7%;
  /* position: absolute; */
}
.top span {
  margin-left: 5px;
  position: absolute;
  top: 5px;
  font-size: 12px;
  color: black;
}
.productDesc {
  width: 100%;
  text-align: left;
  display: flex;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.leftImg {
  width: 28%;
  margin: 0px 10px 0px 10px;
}
.leftImg img {
  width: 100%;
}
.cenText {
  width: 55%;
  /* padding: 0px 10px 0px 10px; */
  position: relative;
}
.cenText .d1 {
  color: black;
  font-weight: 600;
  margin-top: 10px;
}
.cenText .d2 {
  margin-top: 5px;
}
.cenText .d2 span {
  background-color: rgba(177, 177, 177, 0.226);
}
.cenText .d3 {
  margin-top: 15px;
  font-weight: 600;
  color: rgb(247, 126, 14);
}
.cenText .d3 span {
  background-color: rgba(250, 159, 74, 0.24);
}
.rightR {
  width: 10%;
  text-align: right;
  padding-right: 10px;
}
.rightRtop {
  margin-top: 8px;
  color: rgb(247, 15, 15);
}
.rightRtop span {
  font-size: 12px;
}
.rightRtop .price {
  font-size: 14px;
}
.last {
  text-align: right;
  margin-top: 30px;
  padding-right: 15px;
  margin-bottom: 20px;
}
.last .s1 {
  font-size: 12px;
  margin-right: 5px;
}
.last .s2 {
  font-size: 12px;
  font-weight: 600;
  margin-right: 4px;
}
.last .s3 {
  font-size: 12px;
  margin-right: 2px;
}
.last .s4 {
  color: rgb(247, 126, 14);
  font-weight: 600;
}
.checkqqq {
  padding-bottom: 70px;
  margin-top: 20px;
  margin-left: 10px;
  font-size: 14px;
}

/* 提交订单 */
#app /deep/ .van-submit-bar {
  border-top: 1px solid rgb(218, 216, 216);
}
#app /deep/ .van-submit-bar__button {
  width: 38%;
}
</style>